<template>
  <div>
    <el-dialog title="公式配置" :visible.sync="dialogVisible" width="1200px" top="8vh" append-to-body>
      <el-form :model="dataForm" ref="dataForm" label-width="100px">
        <el-container>
          <el-main style="height:calc(100vh  - 320px); padding: 0 45px;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="可用符号：">
                  <div class="tzPaiLie">
                    <div class="tuoZhuaiAn"
                         style="background:url('/images/jia.png') #d9ecff no-repeat center;background-size:contain;"
                         @click="add('+')"></div>
                    <div class="tuoZhuaiAn ml10"
                         style="background:url('/images/jian.png') #d9ecff no-repeat center; background-size:contain;"
                         @click="add('-')"></div>
                    <div class="tuoZhuaiAn ml10"
                         style="background:url('/images/cheng.png') #d9ecff no-repeat center; background-size:contain;"
                         @click="add('*')"></div>
                    <div class="tuoZhuaiAn ml10"
                         style="background:url('/images/chu.png') #d9ecff no-repeat center; background-size:contain;"
                         @click="add('/')"></div>
                    <div class="tuoZhuaiAn ml10"
                         style="background:url('/images/kuo1.png') #d9ecff no-repeat center; background-size:contain;"
                         @click="add('(')"></div>
                    <div class="tuoZhuaiAn ml10"
                         style="background:url('/images/kuo2.png') #d9ecff no-repeat center; background-size:contain;"
                         @click="add(')')"></div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="可用选项：">
                  <el-button @click="add('过程项')">过程项</el-button>
                  <el-button class="ml10" @click="add('常数项')">常数项</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最终结果：">
                  <div class="duiQiCz">
                    <span>{{ dataForm.gsMc }}</span>
                    <span class="ml10"><img src="/images/dengyu.png"
                                            style="width: 20px; height:20px;line-height:30px;vertical-align: middle;"/></span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-button class="ml10" @click="del" style="float: right" v-if="gsPz.length>0">回退</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="公式内容：">
                  <el-card class="box-card" style="margin-top: 0px;">
                    <div v-if="gsPz.length==0">当前无公式</div>
                    <div v-else>
                      <draggable v-model="gsPz" chosenClass="chosen" forceFallback="true" group="people" animation="200"
                                 @start="onStart" @end="onEnd">
                        <transition-group>
                          <span v-for="(t,ii) in gsPz" :key="t.i">
                            <span v-if="t.type=='过程项'">
                              <el-select v-model="t.id" placeholder="请选择" style="width: 250px;margin: 10px;">
                                <el-option
                                  v-for="(item,j) in list"
                                  :key="j"
                                  :label="item.name"
                                  :value="item.code">
                                </el-option>
                              </el-select>
                            </span>
                            <span v-if="t.type=='常数项'">
                              <el-input v-model="t.number" label="请填写" style="width: 100px;margin: 10px;"></el-input>
                            </span>
                            <span v-if="t.type=='符号项'">
                              <img src="/images/jia.png" style="width: 30px;vertical-align: middle;"
                                   v-if="t.value=='+'"/>
                              <img src="/images/jian.png" style="width: 30px;vertical-align: middle;"
                                   v-if="t.value=='-'"/>
                              <img src="/images/cheng.png" style="width: 30px;vertical-align: middle;"
                                   v-if="t.value=='*'"/>
                              <img src="/images/chu.png" style="width: 30px;vertical-align: middle;"
                                   v-if="t.value=='/'"/>
                              <img src="/images/kuo1.png" style="width: 30px;vertical-align: middle;"
                                   v-if="t.value=='('"/>
                              <img src="/images/kuo2.png" style="width: 30px;vertical-align: middle;"
                                   v-if="t.value==')'"/>
                            </span>
                          </span>
                        </transition-group>
                      </draggable>
                    </div>
                  </el-card>
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {getObj, addObj, putObj} from '@/api/jiangjin/jiangjingspzb'

export default {
  name: "jiangjingspzb-config",
  components: {
    draggable
  },
  data() {
    return {
      dialogVisible: false,
      dataForm: {},
      gsPz: [],
      options: {
        process1001: {type: "个人", code: "process1001", name: "奖金总额", ysList: []},
        process1002: {type: "个人", code: "process1002", name: "加扣奖总额", ysList: []},
        process1003: {type: "个人", code: "process1003", name: "分组员工总数", ysList: []},
        process1011: {type: "个人", code: "process1011", name: "员工岗位系数", ysList: []},
        process1012: {type: "个人", code: "process1012", name: "分组（员工岗位系数）总和", ysList: []},
        process1021: {type: "个人", code: "process1021", name: "员工考核基础分", ysList: []},
        process1022: {type: "个人", code: "process1022", name: "分组（员工考核基础分）总和", ysList: []},
        process1031: {type: "个人", code: "process1031", name: "员工月绩效考核分", ysList: []},
        process1032: {type: "个人", code: "process1032", name: "分组（员工月绩效考核分）总和", ysList: []},
        process1041: {type: "个人", code: "process1041", name: "员工岗位系数×考核基础分", ysList: []},
        process1042: {type: "个人", code: "process1042", name: "分组（员工岗位系数×考核基础分）总和", ysList: []},
        process1051: {type: "个人", code: "process1051", name: "员工岗位系数×月绩效考核分", ysList: []},
        process1052: {type: "个人", code: "process1052", name: "分组（员工岗位系数×月绩效考核分）总和", ysList: []},
        process1091: {type: "个人", code: "process1091", name: "专项奖励", ysList: []},
        process1092: {type: "个人", code: "process1092", name: "工时（工作量）奖励", ysList: []},
        process1093: {type: "个人", code: "process1093", name: "奖励标准奖励", ysList: []},
        process2001: {type: "个人", code: "process2001", name: "绩效年薪基数", ysList: []},
        process2002: {type: "个人", code: "process2002", name: "综合业绩分值", ysList: []},
        // process2007: {type: "个人", code: "process2007", name: "人员年度履历月份数", ysList: []},
        process2003: {type: "个人", code: "process2003", name: "绩效奖金基数", ysList: []},
        process2004: {type: "个人", code: "process2004", name: "个人绩效分数", ysList: []},
        process2005: {type: "个人", code: "process2005", name: "B级绩效分值指数", ysList: []},
        process2006: {type: "个人", code: "process2006", name: "分组（员工B级绩效分值指数）总和", ysList: []},
        process2011: {type: "个人", code: "process2011", name: "分组考核A级起点分数", ysList: []},
        process2012: {type: "个人", code: "process2012", name: "分组考核A级最高分数", ysList: []},
        process2013: {type: "个人", code: "process2013", name: "分组考核B级起点分数", ysList: []},
        process2014: {type: "个人", code: "process2014", name: "分组考核B级最高分数", ysList: []},
        process2015: {type: "个人", code: "process2015", name: "分组考核C级起点分数", ysList: []},
        process2016: {type: "个人", code: "process2016", name: "分组考核C级最高分数", ysList: []},
        process2017: {type: "个人", code: "process2017", name: "分组考核D级起点分数", ysList: []},
        process2018: {type: "个人", code: "process2018", name: "分组考核D级最高分数", ysList: []},
        process2021: {type: "个人", code: "process2021", name: "分组考核A档最低分数", ysList: []},
        process2022: {type: "个人", code: "process2022", name: "分组考核A档最高分数", ysList: []},
        process2023: {type: "个人", code: "process2023", name: "分组考核B档最低分数", ysList: []},
        process2024: {type: "个人", code: "process2024", name: "分组考核B档最高分数", ysList: []},
        process2025: {type: "个人", code: "process2025", name: "分组考核C档最低分数", ysList: []},
        process2026: {type: "个人", code: "process2026", name: "分组考核C档最高分数", ysList: []},
        process2027: {type: "个人", code: "process2027", name: "分组考核D档最低分数", ysList: []},
        process2028: {type: "个人", code: "process2028", name: "分组考核D档最高分数", ysList: []},
      },
      list: []
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          getObj(this.dataForm.id).then(response => {
            this.dataForm = response.data.data;

            this.list = [];
            for (var i in this.options) {
              if (this.options[i].type == this.dataForm.gsFl) {
                this.list.push(this.options[i]);
              }
            }

            if (!this.dataForm.gsPz) {
              this.gsPz = [];
            } else {
              this.gsPz = JSON.parse(this.dataForm.gsPz);
            }
            this.dialogVisible = true;
          })
        }
      })
    },
    add(t) {
      if (t == "过程项") {
        this.gsPz.push(
          {
            i: this.getUUID(),
            type: "过程项",
            id: ""
          }
        )
      } else if (t == "常数项") {
        this.gsPz.push(
          {
            i: this.getUUID(),
            type: "常数项",
            number: 1
          }
        )
      } else {
        this.gsPz.push(
          {
            i: this.getUUID(),
            type: "符号项",
            value: t
          }
        )
      }
    },
    del() {
      if (this.gsPz.length > 0) {
        this.gsPz.splice(this.gsPz.length - 1, 1);
      }
    },
    save() {
      if (this.gsPz.length == 0) {
        this.dataForm.gsPz = "";
        this.dataForm.gsZs = "";
        this.dataForm.gsYs = "";
        this.dataForm.gsYz = 0;
        this.eSave();
      } else {
        let jsStr = "";
        this.dataForm.gsZs = "";
        let gsYs = [];
        for (var i in this.gsPz) {
          var r = this.gsPz[i];
          if (r.type == "过程项" && r.id == "") {
            this.$notify.closeAll();
            this.$notify.error({
              message: "请选择公式里的过程项",
              showClose: false,
              duration: 3000
            })
            return;
          }
          if (r.type == "常数项" && (r.number == "" || isNaN(r.number) || (r.number + "").indexOf(" ") != -1)) {
            this.$notify.closeAll();
            this.$notify.error({
              message: "请填写公式里的常数项",
              showClose: false,
              duration: 3000
            })
            return;
          }
          if (r.type == "过程项") {
            jsStr += "100";
            this.dataForm.gsZs += this.options[r.id].name;
            for (var j in this.options[r.id].ysList) {
              if (gsYs.indexOf(this.options[r.id].ysList[j]) == -1) {
                gsYs.push(this.options[r.id].ysList[j])
              }
            }
          } else if (r.type == "常数项") {
            jsStr += r.number;
            this.dataForm.gsZs += r.number;
          } else {
            jsStr += r.value;
            if (r.value == "+") {
              this.dataForm.gsZs += "＋";
            } else if (r.value == "-") {
              this.dataForm.gsZs += "－";
            } else if (r.value == "*") {
              this.dataForm.gsZs += "×";
            } else if (r.value == "/") {
              this.dataForm.gsZs += "÷";
            } else if (r.value == "(") {
              this.dataForm.gsZs += "(";
            } else if (r.value == ")") {
              this.dataForm.gsZs += ")";
            }
          }
        }
        try {
         //console.log(jsStr)
          var s = eval(jsStr);
          this.dataForm.gsPz = JSON.stringify(this.gsPz);
          this.dataForm.gsYz = 1;
          this.dataForm.gsYs = JSON.stringify(gsYs);
          this.eSave();
        } catch (e) {
          this.$notify.closeAll();
          this.$notify.error({
            message: "编写的公式不是有效的数学公式",
            showClose: false,
            duration: 3000
          })
        }
      }
    },
    eSave() {
      putObj(this.dataForm).then(data => {
        this.$notify.success('配置成功')
        this.dialogVisible = false;
        this.$emit('refreshDataList')
      }).catch(() => {
      });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    getUUID(len, radix) {
      //获取UUID
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
        ""
      );
      var uuid = [],
        i;
      radix = radix || chars.length;

      if (len) {
        // Compact form
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
      } else {
        // rfc4122, version 4 form
        var r;

        // rfc4122 requires these characters
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
        uuid[14] = "4";

        // Fill in random data.  At i==19 set the high bits of clock sequence as
        // per rfc4122, sec. 4.1.5
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16);
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join("");
    }
  }
}
</script>

<style lang="scss" scoped>


</style>
